<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
       	<meta http-equiv="content-type" content="text/html; charset=utf-8">
       	<title>{PAGE_TITLE}</title>	
       	<style type="text/css">
			/*margin and padding on body element
			  can introduce errors in determining
			  element position and are not recommended;
			  we turn them off as a foundation for YUI
			  CSS treatments. */
			body {
				margin:0;
				padding:0;
			}
		</style>
		
       	
    <!-- YUI library -->   		
		<script type="text/javascript" src="lib/YUI/yui/build/yuiloader/yuiloader.js" ></script> 			
		<script type="text/javascript" src="lib/YUI/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
		<script type="text/javascript" src="lib/YUI/yui/build/utilities/utilities.js"></script>			
		<script type="text/javascript" src="lib/YUI/yui/build/dragdrop/dragdrop.js"></script>									
		<script type="text/javascript" src="lib/YUI/yui/build/animation/animation.js"></script>
		<script type="text/javascript" src="lib/YUI/yui/build/container/container.js"></script>
		<script type="text/javascript" src="lib/YUI/yui/build/container/resize-panel.js"></script>	
		<script type="text/javascript" src="lib/YUI/yui/build/button/button-beta.js"></script>		
		<script type="text/javascript" src="lib/YUI/yui/build/calendar/calendar-min.js"></script>
		<script type="text/javascript" src="lib/YUI/yui/build/tabview/tabview.js"></script>
	<!-- YUI library -->
	
	<!-- YUI style sheets -->
			<link rel="stylesheet" type="text/css" href="lib/YUI/yui/build/assets/skins/sam/calendar.css">  		
		   	<link rel="stylesheet" type="text/css" href="lib/YUI/yui/build/assets/skins/sam/container.css" />				
		   	<link rel="stylesheet" type="text/css" href="lib/YUI/yui/build/assets/skins/sam/tabview.css" />
	<!-- YUI style sheets -->
	
	<!-- fonts -->
			<link rel="stylesheet" type="text/css" href="lib/YUI/yui/build/fonts/fonts-min.css" />
	<!-- fonts -->
	
	<!-- DMS style sheet -->				
			<link rel="stylesheet" type="text/css" href="css/dms.css" />
	<!-- DMS style sheet -->
	
	<!-- Xajax initialization code -->
		{XAJAX_INIT}
	<!-- Xajax initialization code -->			
	
	<script type="text/javascript">			
				
		loader = new YAHOO.util.YUILoader(); 
		loader.require("calendar"); 
		loader.loadOptional = true;			
		loader.base = 'lib/YUI/yui/build'; 	
		loader.insert();
					
		YAHOO.namespace("dms");
	   
	    YAHOO.dms.dashboard_client_windows = Array();
	   
		// Initialize and render the menu when it is available in the DOM			
		function init() {	
		
			// Define various event handlers for Dialog				
				var handleCancel = function() {
					this.cancel();
				};								
		
			// Instantiate the tabs //
				var dashboard = new YAHOO.widget.TabView('dashboard');
				var left_pane_notification_tab = new YAHOO.widget.TabView('left_pane_notification_tab');				
				var left_pane_calendar_tab = new YAHOO.widget.TabView('left_pane_calendar_tab');				
				var dashboard_client_panels_tab = new YAHOO.widget.TabView('dashboard_clients_panel_tab');
				var dashboard_notifications_panel_tab = new YAHOO.widget.TabView('dashboard_notifications_panel_tab');
				var dashboard_toolbar_panel_tab = new YAHOO.widget.TabView('dashboard_toolbar_panel_tab');

			
			// Instantiate the YUI Calendar //
				YAHOO.dms.calendar = new YAHOO.widget.Calendar("calendar","calendar_container"); 
	  	    	YAHOO.dms.calendar.render();	  	    		  	    	
 																									  																			
			//YAHOO.netinternals.window_manager = new YAHOO.widget.OverlayManager(); 			
		}							
		
		function open_client_window( id ) {			
			var window_name = "client_window_" + id;
			var window_close = "client_window_close_" + id;
			
			YAHOO.dms.dashboard_client_windows[id] = new YAHOO.widget.Panel(window_name, { width:"300px", height:"500px", visible:true, constraintoviewport:true, draggable:true, fixedcenter:true, close:false, effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );	
			YAHOO.dms.dashboard_client_windows[id].close_window = function () {
															YAHOO.dms.dashboard_client_windows[id].hide();
															YAHOO.dms.dashboard_client_windows[id].destroy();
															YAHOO.dms.dashboard_client_windows[id] = null;
														}			
			YAHOO.dms.dashboard_client_windows[id].setHeader("Client Window: ");
			YAHOO.dms.dashboard_client_windows[id].setBody("This is a dynamically generated Panel. <br><a href='javascript: YAHOO.dms.dashboard_client_windows[" + id + "].close_window()'>Close</a>");
			YAHOO.dms.dashboard_client_windows[id].setFooter("-------");					
			
			YAHOO.dms.dashboard_client_windows[id].render("dashboard_clients_panel");
			YAHOO.util.Event.addListener(window_name, window_close, YAHOO.dms.dashboard_client_windows[id].focus, YAHOO.dms.dashboard_client_windows[id], true);  
		}
		
		function open_notification_window( id ) {			
			var window_name = "notification_window_" + id;
			var window_close = "notification_window_close_" + id;
			
			YAHOO.dms.dashboard_notification_windows[id] = new YAHOO.widget.Panel(window_name, { width:"300px", height:"500px", visible:true, constraintoviewport:true, draggable:true, fixedcenter:true, close:false, effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );	
			YAHOO.dms.dashboard_notification_windows[id].close_window = function () {
															YAHOO.dms.dashboard_notification_windows[id].hide();
															YAHOO.dms.dashboard_notification_windows[id].destroy();
															YAHOO.dms.dashboard_notification_windows[id] = null;
														}
			YAHOO.dms.dashboard_clnotificationient_windows[id].setHeader("Client Window: ");
			YAHOO.dms.dashboard_notification_windows[id].setBody("This is a dynamically generated Panel. <br><a href='javascript: YAHOO.dms.dashboard_notification_windows[" + id + "].close_window()'>Close</a>");
			YAHOO.dms.dashboard_notification_windows[id].setFooter("End of Panel #2");					
			
			YAHOO.dms.dashboard_notification_windows[id].render("dashboard_clients_panel");
			YAHOO.util.Event.addListener(window_name, window_close, YAHOO.dms.dashboard_notification_windows[id].focus, YAHOO.dms.dashboard_notification_windows[id], true);  
		}
		
		YAHOO.util.Event.onDOMReady(init);													
	</script>   		
</head>
<body class="yui-skin-sam">       				
	<div id="left_pane_wrapper">
		<div id="logo">
			LOGO HERE
		</div>
		<div id="left_pane_notification">
			<div id="left_pane_notification_tab" class="yui-navset">
				<ul class="yui-nav">        
					<li class="selected"><a href="#taba"><em>Telemarketer</em></a></li>				
				</ul>            
				<div class="yui-content">
					<div id="tab1">
						<div id="left_notification_panel">
							<a href="">Logout</a><br />
							<a href="">Made Calls Today</a><br />
							<a href="">Unmade Calls Today</a><br />
							<a href="">Clients To Call Today</a><br />        
							<a href="">Profile</a><br />
							<a href="">Commission</a><br />
						</div>
					</div>              
				</div>
			</div>
		</div>
		<div id="left_pane_calendar">
			<div id="left_pane_calendar_tab" class="yui-navset">
				<ul class="yui-nav">        
					<li class="selected"><a href="#tab1"><em>Calendar</em></a></li>        
				</ul>            
				<div class="yui-content">
					<div id="tab1">
						<div id="cal1Container"></div>
						<script type="text/javascript">
							YAHOO.namespace("example.calendar");

							YAHOO.example.calendar.init = function() {
								YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
								YAHOO.example.calendar.cal1.render();
							}

							YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);
						</script>
					</div>               
				</div>
			</div>
		</div>		
	</div>
	<div id="right_pane_wrapper">
		<div id="dashboard" class="yui-navset">
			<ul class="yui-nav">
				<li class="selected"><a href="#tab1"><em>Dashboard</em></a></li>
				<li><a href="#tab2"><em>Clients</em></a></li>
				<li><a href="#tab3"><em>Reports</em></a></li>
				<li><a href="#tab4"><em>Events</em></a></li>
				<li><a href="#tab5"><em>Profiles</em></a></li>
				<li><a href="#tab6"><em>Settings</em></a></li>
			</ul>            
			<div class="yui-content">
				<div id="tab1">
					<div class="dashboard_wrapper">						
						<div id="dashboard_clients_panel">
							<div id="dashboard_clients_panel_tab" class="yui-navset">
								<ul class="yui-nav">									
									<li class="selected" style="width: 400px;"><a href="#tab1"><em>Clients To Call</em></a><li>
								</ul>            
								<div class="yui-content">
									<div id="tab1">
										<div id="dashboard_clients_content_wrapper">
											<div class="dashboard_client_item_wrapper">
												<span class="color_lightgreen"><span class="clickable" onClick="open_client_window({CLIENT_ID})"><span class="font_title">{CLIENT_NAME}</span></span></span><br />
												<div class="font_small">Email:</div>
												<div class="font_small">Tel No:</div>
												<div class="font_small">Address:</div>
												<div class="font_small">Time to Call:</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						
						<div id="dashboard_notifications_panel">
							<div id="dashboard_notifications_panel_tab" class="yui-navset">
								<ul class="yui-nav">									
									<li class="selected" style="width: 360px;"><a href="#tab1"><em>Notifications</em></a></li>
								</ul>            
								<div class="yui-content">
									<div id="tab1">
										<div id="dashboard_notifications_content_wrapper">
											<div id="dashboard_notifications_content_wrapper">
											<div class="dashboard_notifications_item_wrapper">
												<span class="color_lightgreen"><span class="clickable"><span class="font_title">Notification 1</span></span></span>
											</div>
										</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						
						<div id="dashboard_toolbar_panel">
							<div id="dashboard_toolbar_panel_tab" class="yui-navset">
								<ul class="yui-nav">									
									<li class="selected" style="width: 252px;"><a href="#tab1"><em>Toolbar</em></a></li>									
								</ul>            
								<div class="yui-content">
									<div id="tab1">
										<div id="dashboard_toolbar_content_wrapper">
											
										</div>
									</div>
								</div>
							</div>
						</div>
						
					</div>					
				</div>
				<div id="tab2">
					<div class="dashboard_wrapper">
						
					</div>
				</div>
				<div id="tab3">
					<div class="dashboard_wrapper">
						
					</div>
				</div>
				<div id="tab4">
					<div class="dashboard_wrapper">
						
					</div>
				</div>
				<div id="tab5">
					<div class="dashboard_wrapper">
						
					</div>
				</div>
				<div id="tab6">
					<div class="dashboard_wrapper">
						
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="dms_footer" style="clear:both; width: 100%; text-align:center;">
		De La Salle Donations Management System | De La Salle Philippines 2009
	</div>
</body>
</html>
